{% extends "memory_base.html" %}
{% load i18n %}
{% block head %}
    <title>{% trans "个人中心" %}</title>
    {{ block.super }}
    <style>
    *{
        font-family: "Microsoft YaHei", Arial, "Segoe UI", sans-serif;
    }
    .mybutton1{
       width: 100px;
       height: 40px;
       font-size: 14px;
    }
    </style>

    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
{% endblock %}

{% block content %}
    <div class="container">




        <div class="col-md-2" style="margin-left: -30px; margin-top: 40px;">
            <div class="king-vertical-nav4" style="width:200px;" id="king-vertical-nav4">
            <div class="sidebar-inner">
                <ul class="navi">
                    <li>
                        <a onclick="jumpToPersonalCenter()">
                            <i class="glyphicon glyphicon-user"></i>我的信息
                        </a>
                    </li>

                </ul>
                <ul class="navi">
                    <li>
                        <a onclick="jumpToMyCollect()">
                            <i class="glyphicon glyphicon-heart"></i>我的收藏
                        </a>
                    </li>
                </ul>
                <ul class="navi">
                    <li>
                        <a>
                            <i class="glyphicon glyphicon-eye-open"></i>我的关注
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        </div>
        <div class="col-md-6 col-md-offset-2">
            <div class="row" style="margin-top: 50px">
                <div class="col-md-3">
                    <img id="user_pic" src="{{ STATIC_URL }}{% if user.pic %}{{user.pic}}{% else %}memoryImage/userImage/default.jpg{% endif %}" class="info img-responsive img-thumbnail">
                </div>
                <div class="col-md-7" style="margin: 20px 10px;">
                    <div class="upload-user-pic" style="display: none;">
                        <input type="file" id="pic">
                    </div>
                    <p id="email" class="info" style="margin-top: 10px;">Email: {{ user.email}}</p>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-3">
                    <p>用户号</p>
                </div>
                <div class="col-md-7">
                    <p id="userId">{{user.user_id}}</p>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-3">
                    <p>昵称</p>
                </div>
                <div class="col-md-7">
                    <p id="username" class="info">{{user.username}}</p>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-3">
                    <p>个性签名</p>
                </div>
                <div class="col-md-7">
                    <p id="motto" class="info">{{user.motto}}</p>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-3">
                    <p>密码</p>
                </div>
                <div class="col-md-7">
                    <p id="password" class="info">{{user.password}}</p>
                </div>
            </div>
            <hr>
            <div class="button-area">
                <button id="edit" type="button" class="mybutton1">
                    <span class="glyphicon glyphicon-edit"></span>
                    修改信息</button>
                <button id="saveEdit" type="button" class="mybutton1" style="display: none;">
                    <span class="glyphicon glyphicon-floppy-save"></span>
                    确认修改</button>
            </div>
        </div>
    </div>




{% endblock %}

{% block extra_block %}
<script>

    $("#edit").click(function (){
        $("#email").replaceWith("<input id='email' class=\"form-control\" style='color:gray' placeholder='Email:' value='"+$.trim($("#email").html().split(":")[1])+"'>");

        $("#username").replaceWith("<input id='username' class=\"form-control\" style='color:gray' value='"+$("#username").html()+"'>");

        $("#motto").replaceWith("<input id='motto' class=\"form-control\" style='color:gray' value='"+$("#motto").html()+"'>");

        $("#password").replaceWith("<input id='password' class=\"form-control\" style='color:gray' value='"+$("#password").html()+"'>");

        $("#edit").hide();
        $("#saveEdit").show();
        $(".upload-user-pic").show();
    });

    $("#saveEdit").click(function () {

        var formdata = new FormData();

        var pic = $('#pic')[0].files[0];
        var email = $("#email").val();
        var username = $("#username").val();
        var motto = $("#motto").val();
        var password = $("#password").val();
        var user_id = $("#user_id").val();
        {#var csrfmiddlewaretoken = "{{ csrf_token }}";#}
        if ( username === "" ){
            new bkMessage({
                message: "昵称不能为空哦",
                theme: 'error'
            });
            return false
        }else if ( password === "" ) {
           new bkMessage({
                message: "密码不能为空哦",
                theme: 'error'
            });
           return false
        }

        formdata.append('pic', pic);
        formdata.append('email', email);
        formdata.append('username', username);
        formdata.append('motto', motto);
        formdata.append('password', password);
        formdata.append('user_id', user_id);

        $.ajax({
            url:'{{ SITE_URL }}memory_storage/save_user_info/?user_id={{ user.user_id }}',
            method:'post',
            data: formdata,
                {#"pic": $("#pic").val(),#}
                {#"email":$("#email").val(),#}
                {#"username":$("#username").val(),#}
                {#"motto":$("#motto").val(),#}
                {#"password":$("#password").val(),#}
                {#"user_id": GetQueryString('user_id'),#}
                {#"csrfmiddlewaretoken":"{{ csrf_token }}",#}
            processData: false, // 不处理数据( 必须有)
            contentType: false,  //不设置内容类型 ( 必须要)
            header: {
                        'X-CSRFToken': "{{ csrf_token }}",
            },
            success:function (response){
                if(response["result"]){
                    new bkMessage({
                        message: response['message'],
                        theme: 'success'
                    });
                    location.reload()
                }else{
                    new bkMessage({
                        message: response['message'],
                        theme: 'error',
                        delay: 3000
                    });
                }
            }
        })
    });

</script>
{% endblock %}

{% block footer %}{% endblock %}
